<div class="container">
  <div nz-row class="opus-display-box">
    <div nz-col [nzSpan]="nzSpan" *ngFor="let item of list;let i = index" class="opus-display-num">

      <div class="opus-display" [id]="'opus-display' + i">

        <span class="describe">
          <a [routerLink]="[ '/opus-details/',  item.id ]">
            <div>
              {{item.title}}
              <br>{{item.synopsis}}
              <br>
              <span style="margin-right:10px" >了解更多</span>
              <i nz-icon type="arrow-right" Theme="outline" style="line-height:24px;" class="wow infinite shake"></i>
            </div>
          </a>
        </span>
        <!-- <div style=" display: flex;
        justify-content: center;">
          <div class="opus-display-details"><span>详情</span></div>
        </div> -->
        <img [src]="imgPrefixUrl + item.cover" class="opus-display-img" />
      </div>

      <div class="describe1">
        <div>
          <div class="title-box">
            <div class="circle"></div>
            <div class="box">
              <p class="title-enus">E M P O L D E R</p>
              <p class="title">{{item.title}}</p>
              <div class="title-ornament"></div>
            </div>
          </div>
          <div class="content-box">
            <div style="height: 15px;border: 1.5px solid #383434;margin-right: 10px;margin-top: 3px;"></div>
            <div class="content">
              <p>{{item.synopsis}}</p>
              <div style="display: flex; justify-content: flex-endy;">
                <a [routerLink]="[ '/opus-details/',  item.id]">
                  <span style="margin-right:10px">了解更多</span>
                  <i nz-icon type="arrow-right" Theme="outline" style="line-height:24px;"
                    class="wow infinite shake"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
  <a routerLink="/oeuvre">
    <div class="more-box">
      <div class="more">
        更多作品
      </div>
    </div>
  </a>